﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   请输入要计算斐波那契数列的第几个数：
			<input type="text" v-model="num">
			<p v-show="result">{{result}}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		      num: 0,
		      result: ''
		    },
				watch : {
				  num: function(val){
				  	this.result = "请稍候...";
				  	if(val > 0){
				    	let worker = new Worker("fibonacci.js");
				    	worker.onmessage = (event) => this.result = event.data;
							worker.postMessage(val);
						}
						else{
							this.result = '';
						}
				  }
				}
			});
		</script>
	</body>
</html>